<template>
  <div class="table">
    <div class="top">
      <div class="left">
        <div class="item">
          <div class="label">
            <span>*</span>
            <span>船名航次：</span>
          </div>
          <el-select :disabled="seeFlag" v-model="form.voyIdForShow" @change="voyName" placeholder="搜索查询更多" clearable
            filterable size="small" remote :remote-method="remoteMethod" style="width:160px">
            <!-- +item.iefg -->
            <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
              :value="JSON.stringify(item)" v-for="item,index in shipNo" :key="index"></el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="label">
            <span>*</span>
            <span>贸易类型：</span>
          </div>
          <el-select :disabled="seeFlag" v-model="form.tradeFlag" placeholder="请选择" clearable filterable size="small"
            style="width:160px">
            <el-option :label="item.meaning" :value="item.lowValue" v-for="item,index in dataList.INTERNALFG_IM"
              :key="index"></el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="label">
            <span>*</span>
            <span>提单号：</span>
          </div>
          <el-input :disabled="seeFlag" v-model="form.billNo" placeholder="请输入" size="small" style="width:160px">
          </el-input>
        </div>
        <div class="item">
          <div class="label">
            <span></span>
            <span>箱号：</span>
          </div>
          <el-input :disabled="seeFlag" v-model="form.cntrNo" placeholder="请输入" size="small" style="width:160px">
          </el-input>
        </div>
      </div>
      <div class="item">
        <el-button type="primary" class="search" @click="setTable" v-if="!seeFlag">查询</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" @selection-change="handleSelectionchangeS"
        :header-cell-style="{ background: '#EEF1F5'}" style="width: 100%">
        <!-- v-if="!seeFlag" -->
        <el-table-column type="selection" :selectable="selectable" width="55">
        </el-table-column>
        <el-table-column prop="cntrno" label="箱号" width="180">
        </el-table-column>
        <el-table-column prop="billno" label="提单号" width="180">
          <template slot-scope="scope">
            {{ scope.row.containerGoodList && scope.row.containerGoodList.length
            ?scope.row.containerGoodList[0].planGoods.billno || '' :'' }}
          </template>
        </el-table-column>
        <el-table-column prop="cszCsizecd" label="尺寸" width="180">
        </el-table-column>
        <el-table-column prop="ctypecd" label="箱型" width="180">
        </el-table-column>
        <el-table-column prop="cstCopercd" label="持箱人" min-width="220">
          <template slot-scope="scope">
            {{ ((scope.row.cstCopercd || '') + '/' + (scope.row.cstCoperName || '')) }}
          </template>
        </el-table-column>
        <el-table-column prop="cstOwnercd" label="箱控公司" width="180">
        </el-table-column>
        <el-table-column prop="cweight" label="箱货总重（吨）" width="180">
        </el-table-column>
        <el-table-column prop="gname" label="货名" width="180">
          <template slot-scope="scope">
            {{ scope.row.containerGoodList && scope.row.containerGoodList.length
            ?scope.row.containerGoodList[0].planGoods.gname || '' :'' }}
          </template>
        </el-table-column>
        <el-table-column prop="dirtyfg" label="污箱标记" width="180">
        </el-table-column>
        <el-table-column prop="brkdmgcd" label="残损标记" width="180">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'emptyTable',
  components: {},
  props:{
    seeFlag:{
      default:false
    }
  },
  data() {
    return {
      form: {
        planTag:'PFRE',
        termCode:'',
        voyId:'',
        tradeFlag:'',
        billNo:'',
        cntrNo:'',
      },
      tableData:[],
      rules: {},
      dataList:{},
      shipNo:[],
      selection:[],
      form1:{},
      oldFormJson:{ 
        planTag:'PFRE',
        termCode:'',
        voyIdForShow:'',
        voyId:'',
        tradeFlag:'',
        billNo:'',
        cntrNo:'',},
    }
  },

  methods: {
    voyName(item) {
      console.log(JSON.parse(item))
      this.form.voyId = JSON.parse(item).id
      this.form.voyName = JSON.parse(item)?.vessels?.vslName || JSON.parse(item)?.vslName || ''
      this.form.termCode = JSON.parse(item).termCode
      this.$emit('setTerm',JSON.parse(item).termCode)
      console.log(this.form)
    },
    selectable(){
      return !this.seeFlag
    },
    handleSelectionchangeS(val) {
      this.selection = val;
      //this.$refs.table.toggleRowSelection(val, true);
    },
    setTable(){
      if(!this.form.voyId){
        this.$message.error('请选择船名航次')
        return
      }
      if(!this.form.tradeFlag){
        this.$message.error('请输入贸易类型')
        return
      }
      if(!this.form.billNo){
        this.$message.error('请输入提单号')
        return
      }
      this.$emit('set',this.form.termCode)
      this.$api.tosGetContainer(this.form).then(res=>{
        this.tableData=res.data
      }).catch(res=>{
        this.tableData=[]
      })
    },
    remoteMethod(val = ''){
      console.log('调-------------用-------------搜-------------索',this.$route.name);
      this.$api.voyagesVslVoy({
        termCode:'',//码头编码
        schedulesType:'CONTAINER',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:this.$route.name == 'heavyEmpty'?'I':'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
      }).catch()
    },
    getDate(){
      this.dataList={
        INTERNALFG_IM:[],
        OVER_LMT_CD:[],
        DIRTYCD:[],
        ADDTIONALOPERATE:[],
        cus:[],
        boxSize:[],
        ports:[],
        hz:[],
        hd:[],
        danger:[],
        union:[]
      }
      //boxSize 箱型
      //cus 持箱人
      //shipNo 航名
      //INTERNALFG_IM 贸易类型
      //DIRTYCD 坏/污
      //ADDTIONALOPERATE 附加操作
      this.$api.getDangerUnionno().then(res=>{
        this.dataList.union=res.data
      }).catch()

//----------------------------------------
      console.log('提重返空====================----');
      this.$api.voyagesVslVoy({
        termCode:'',//码头编码
        schedulesType:'CONTAINER',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:this.$route.name == 'heavyEmpty'?'I':'',//进出口 进口I,出口E
        something:'',//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
      }).catch()
      // this.$api.voyagesPage({
      //   //termCode:'HX',
      //   size:999,
      //   current:0
      // }).then(res=>{
      //   this.shipNo=res.data.records
      // }).catch()
//-------------------------------------------

      this.$api.dangerCode().then(res=>{
        this.dataList.danger=res.data.data
        this.$forceUpdate()
      }).catch()
       this.$api.port().then((res) => {
          this.dataList.ports = res.data.data
          this.$forceUpdate()
        }).catch()
      this.$api.customerByType({
        tenantTypeName:'货主'
      }).then(res=>{
        this.dataList.hz=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName:'货代'
      }).then(res=>{
        this.dataList.hd=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.getCustomerRelations({
        //termCode:'HX'
      }).then(res=>{
        this.dataList.cstCoperList=res.data
        this.$forceUpdate()
      }).catch()
      this.$api.containerTypeSizeInfo().then(res=>{
        this.dataList.boxList=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'DIRTYCD'
      }).then(res=>{
        this.dataList.DIRTYCD=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'ADDTIONALOPERATE'
      }).then(res=>{
        this.dataList.ADDTIONALOPERATE=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'INTERNALFG_IM'
      }).then(res=>{
        this.dataList.INTERNALFG_IM=res.data.data
        this.$forceUpdate()
      }).catch()
      /*不确定*/
      this.$api.getVessels().then(res=>{
        this.dataList.ships=res.data
      }).catch()
    }
  },

  computed: {},

  mounted() {
    this.getDate()
  },
}
</script>
<style lang='less' scoped>
.table {
  background: #fff;

  .top {
    display: flex;
    align-items: flex-start;
    padding: 20px 20px 0;
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    display: flex;

    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 17px;

      .label {
        margin-right: 5px;

        //width: 80px;
        span:first-child {
          color: #ff3838;
        }
      }
    }

    .search {
      background: #0f47b8;
      height: 30px;
      padding: 5px 10px;
    }

    .left {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }
  }

  .table {
    padding: 20px;
  }
}
</style>